<template>
  <div class="botton">
    <!-- <div class="code"><a href=""><img src="./img/二维码.png" alt="" width="50" height="50"></a></div> -->
    <div class="head">
      <div class="login">登陆</div>
      <div class="registers" @click="getRegisters">注册</div>
    </div>
    <div class="form" @submit="handleSubmit">
      <el-form :model="form" label-position="right" label-width="60px" status-icon>
        <el-form-item label="账户" prop="account" label-width="50px" :error="errors.account">
          <el-input v-model="form.account" placeholder="请输入账号" />
          <el-error :error="errors.account"></el-error>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="50px" :error="errors.password">
          <el-input type="password" v-model="form.password" class="rounded-input" placeholder="请输入密码" />
          <el-error :error="errors.password"></el-error>
        </el-form-item>
        <el-form-item label-width="50px" :error="errors.agreement">
          <el-checkbox v-model="form.agreement" class="title">
            我已同意隐私条款和服务条款
          </el-checkbox>
          <el-error :error="errors.agreement"></el-error>
        </el-form-item>
        <el-button @click.native.prevent="handleSubmit" size="large" class="subBtn" type="primary"
          native-type="submit">点击登录</el-button>
      </el-form>

    </div>
    <div class="actions">
      <div class="forget"><a>忘记密码</a></div>
      <div class="phone" @click="getHome"><a>稍后登录</a></div>
    </div>
    <div class="other">
      <span class="other_title">其他方式登陆</span>
      <div class="login__list">
        <span class="login__list_icon alipay"><img src="@/assets/img/支付宝.png" alt=""></span>
        <span class="login__list_icon wechat"><img src="@/assets/img/微信.png" alt=""></span>
        <span class="login__list_icon qq"><img src="@/assets/img/qq.png" alt=""></span>
        <span class="login__list_icon weibo"><img src="@/assets/img/微博.png" alt=""></span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      form: {
        account: '',
        password: '',
        agreement: false
      },
      errors: {}
    };
  },
  methods: {
    getRegisters() {
      this.$router.push('/register')
    },
    getIndex() {
      this.$router.push('/home/index')
    },
    getHome() {
      this.$router.push('/home/index')
    },
    handleSubmit() {
      this.errors = {};
      let hasError = false;

      const { account, password, agreement } = this.form;

      if (!account) {
        this.$set(this.errors, 'account', '请输入账户');
        hasError = true;
      }

      if (!password) {
        this.$set(this.errors, 'password', '请输入密码');
        hasError = true;
      } else if (password.length < 6 || password.length > 14) {
        this.$set(this.errors, 'password', '密码长度为6-14个字符');
        hasError = true;
      }

      if (!agreement) {
        this.$set(this.errors, 'agreement', '请同意条款');
        hasError = true;
      }

      if (!hasError) {
        axios.get('http://localhost:8090/user')
          .then(response => {
            let index = response.data.findIndex(user => user.account === account && user.password === password);
            if (index !== -1) {
              let token = response.data[index].token;
              localStorage.setItem('token', token);
              this.$notify({
                title: '登录成功',
                message: '正在跳转首页',
                type: 'success'
              });
              this.$router.push('/home/index');
            } else {
              this.$notify.error({
                title: '登录失败',
                message: '账号密码错误'
              });
            }
          })
          .catch(error => {
            console.error('错误', error);
          });
      }
    }

  }

}
</script>

<style scoped>
.form {
  position: absolute;
  width: 350px;
  top: 140px;
  left: 35px;
}


.subBtn {
  margin-left: 15px;
  width: 350px;
  height: 50px;
}

.title {
  font-size: 30px;
}

.botton {
  position: relative;
  margin: 100px auto;
  width: 450px;
  height: 650px;
  background-color: #fff;
  border-radius: 5%;
}

.botton .code {
  position: absolute;
  right: 0px;
  width: 50px;
  height: 50px;
  background-color: #ff5c00;
  border-radius: 5px;

}

.botton .head {
  position: absolute;
  top: -10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 60px;
  width: 100%;
  height: 41px;
  color: #fff;
  font-size: 25px;
  font-weight: 540;
}

.login {
  width: 50px;
  color: #000;
  margin-left: 40px;
  border-bottom: 4px solid #ff5c00;
  border-radius: 2px;
  cursor: pointer;
}

.registers {
  width: 50px;
  color: #bbb;
  margin-left: 25px;
  cursor: pointer;
}



input:focus {
  outline: 1px solid #ff5c00;
  box-shadow: 0 0 5px 1px #ff5c00;
}

.righ {
  display: none;
  color: green;
  font-size: 15px;
}

.actions {
  cursor: default;
  position: absolute;
  top: 410px;
  margin-top: 15px;
  margin-left: 50px;
  display: flex;
  justify-content: space-between;
  width: 350px;
  height: 60px;
}

.actions a {
  color: #ff5c00;
  font-size: 18px;
  font-weight: 540;
}

.other {
  position: absolute;
  bottom: 100px;
  text-align: center;
  width: 100%;
  height: 50px;
}

.login_list {
  width: 46px;
  height: 46px;
}

.other_title {
  color: #bbb;
  font-size: 16px;
}

.login__list_icon img {
  width: 46px;
  height: 46px;
  margin-top: 20px;
  margin-left: 30px;
}
</style>